<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch class="pt-3">
        <template #right>
            <div class="d-flex align-items-center">
                <el-date-picker size="medium"
                v-model="search.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <el-input class="mx-3" v-model="search.keyword" placeholder="输入订单号搜索" 
                size="medium" style="width:200px">
                </el-input>
                <el-button size="medium" type="info">搜索</el-button>
            </div>
        </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
        @selection-change="handleSelectionChange"
      >
      </el-table-column>
      <el-table-column prop="name" label="商品信息">
      </el-table-column>
      <el-table-column prop="username" label="商品清单" align="center">
      </el-table-column>
      <el-table-column prop="price" label="订单金额" align="center">
      </el-table-column>
      <el-table-column prop="order" label="收货信息" align="center">
      </el-table-column>
      <el-table-column prop="content" label="买家" align="center">
      </el-table-column>
      <el-table-column prop="code" label="交易状态" align="center">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
            <el-button type="danger" plain size="mini" @click="delItem(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer
      class="d-flex align-items-center p-0 border-top position-fixed elFoot"
    >
      <div class="pl-2">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  data() {
    return {
      superSearch: false,
      //   商品类型
      options: ["区域一", "区域二"],
      // 商品列表数据
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      search:{
          time:'',
          keyword:''
      }
    };
  },
  components: {
    buttonSearch,
  },
  created() {},
  computed: {},
  watch: {},
  methods: {
    delItem(item) {
      this.$confirm("是否删除该规格?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(item.$index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
.skulist {
  width: 50px;
}
.skulist:hover {
  cursor: pointer;
  background-color: #f4f4f4;
}
.skulist > i {
  display: none;
}
.skulist:hover > font {
  display: none;
}
.skulist:hover > i {
  display: inline-block;
}
</style>
